<template>
  <div>

    <el-row v-bind:style="{height: contentHeight + 'px'}">

      <el-col
        :span="16"
        style="height:100%"
      >
        <div class="grid-content grid-left">
          <div
            class="grid-L1"
            style="position: relative"
          >
            <!--地图组件-->
            <OpenLayerMap :mapHeight='contentHeight-2'></OpenLayerMap>
            <TitleLenged
              :isShow="isShowTitle"
              :titleText="titleText"
            ></TitleLenged>
            <SlideMenu @watchChild="slideMenuOnClick"></SlideMenu>
            <timeline
              v-if="showSwiper"
              :swiperSlides="yearlist"
              :swiperOption="swiperOption"
              @watchTimeLine="timelineOnClick"
            ></timeline>

          </div>
        </div>
      </el-col>
      <el-col
        :span="8"
        style="height:100%"
      >
        <div class="grid-content grid-right">
          <GridRight ref="gridRight"></GridRight>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import OpenLayerMap from '../OpenLayerMap.vue';
import TitleLenged from '../TitleLenged.vue';
import timeline from '../timeline/timeline.vue';
import SlideMenu from './SlideMenu.vue';
import GridRight from './GridRight.vue';

import * as mapOper from '../../scripts/mapOper.js';
// import "swiper/dist/css/swiper.css";

// import { swiper, swiperSlide } from "vue-awesome-swiper";
// import GridR1 from "../components/GridR1.vue";
// import GridR2 from "../components/GridR2.vue";
// import GridR3 from "../components/GridR3.vue";
// import add from "../components/add.vue";
var pollutiondata = require('../../config/pollutiondata.json');
export default {
  name: 'dataview',
  components: {
    OpenLayerMap,
    // GridR1,
    // GridR2,
    // GridR3
    TitleLenged,
    SlideMenu,
    timeline,
    GridRight
    // swiper,
    // swiperSlide
    // add
  },
  computed: {
    ...mapGetters(['map'])
  },
  data() {
    return {
      //窗口高度
      contentHeight: 0,
      //是否显示时间轴
      showSwiper: false,
      //时间轴中的数据
      yearlist: [],
      //时间轴中swiperOption
      swiperOption: {
        slidesPerView: 8,
        spaceBetween: 0,
        slidesPerGroup: 8,
        loop: true,
        loopFillGroupWithBlank: true,

        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      //传递到时间轴组件中的数据
      swiperSlides: [],
      //当前选择的子菜单
      currentMenu: '',
      //当前选中的时间
      currentYear: '',
      // 是否显示标题
      isShowTitle: false,
      // 标题内容
      titleText: '',
      
    };
  },
  mounted: function() {
    let w_width = document.documentElement.clientHeight;
    this.contentHeight = w_width - 80;
  },
  methods: {
    ...mapActions(['changeMap', 'changeLengedTitle']),
    slideMenuOnClick (item) {
      
      let pam={map:this.map};
      // 清除overlay
      mapOper.removeAllOverlay(pam);
      //清除非基础图层
      mapOper.removeAllLayers(pam);
      this.isShowTitle = false;
      this.showSwiper = false;
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.currentMenu = item;
      
      // 切换数据图表
      
      this.$refs.gridRight.lazyLoad(this.currentMenu);
      //污染源
      if (item == 'wh_pfqy') {
        let params = {
          that: this,
          map: this.map,
          pointdata: pollutiondata
        };
        
        let map = mapOper.loadOverlay(params);
        this.changeMap({ map: map });
        this.isShowTitle = true;
        this.titleText =
        '乌海污染企业分布';
      
      }
      //烟囱
      if (item == 'wh_yc') {
        let params = {
          that: this,
          map: this.map,
          pointdata: pollutiondata
        };
        
        let map = mapOper.loadWFSLayer(params);
        this.changeMap({ map: map });
        this.isShowTitle = true;
        this.titleText =
        '乌海污烟囱分布';
      
      }
      //热红外数据
      if (item == 'wuhai_IR') {
        this.yearlist = [
          '2018_02',
          '2017_09',
          '2016_06',
          '2015_09',
          '2014_07',
          '2013_06',
          '2011_06',
          '2010_06',
          '2009_06',
          '2008_09',
          '2007_07',
          '2006_08',
          '2005_06',
          '2004_09',
          '2003_05',
          '2002_06',
          '2001_06',
          '2000_10',
          '1999_08',
          '1998_10',
          '1997_05',
          '1995_06',
          '1994_08',
          '1993_06',
          '1992_08',
          '1991_08',
          '1989_07',
          '1988_09'
        ];

        setTimeout(() => {
          loading.close();
          this.showSwiper = true;
        }, 1000);
      }
      if (item == 'wuhai_LandSet') {
        this.yearlist = ['1998_09','1997_05','1996_08','1995_06','1994_08','1993_06','1992_08','1991_08','1990_10','1989_08','1988_09'];
        setTimeout(() => {
          loading.close();
          this.showSwiper = true;
        }, 1000);
      }
    },
    timelineOnClick(item) {
      this.currentYear = item;
      

      let mapfileName='';
      let currtext = '';
      if (this.currentMenu == 'wuhai_IR') {
        currtext = '热红外';
        mapfileName='wuhai-raster';
      }
      if (this.currentMenu == 'wuhai_LandSet') {
        currtext = 'LandSet';
        mapfileName='wuhai-lsraster';
      }
      let params = {
        that: this,
        map: this.map,
        mapfile:mapfileName,
        layerName: this.currentMenu + '_' + this.currentYear
      };
      let map = mapOper.loadRasterLayer(params);
      this.changeMap({ map: map });
      this.isShowTitle = true;
      let titleyear = this.currentYear.split('_');
      this.titleText =
        '乌海' + titleyear[0] + '年' + titleyear[1] + '月' + currtext + '数据';
      // let lsTitle = {isShow: true,title: '123'};
      // this.changeLengedTitle({ lengedTitle: lsTitle });
    }
  }
};
</script>